<template>
    <div id="app" class="set-page">
        <scroll-fixed>
            <page-bar>
                <div slot="middle" class="header-middle">设置</div>
                <div slot="right"></div>
            </page-bar>
        </scroll-fixed>
        <div class="gap"></div>
        <a href="javascript:;" class="section" @click="modelPopup.status = true">
            <article>
                <div>
                    阅读模式
                </div>
                <div class="right">
                    <span>{{ modelPopup.currentModule }}</span>
                    <i class="icon"></i>
                </div>
            </article>
        </a>
        <a href="javascript:;" class="section"  @click=getPop(2)>
            <article>
                <div>
                    清空缓存
                </div>
                <div class="right">
                    <span></span>
                    <i class="icon"></i>
                </div>
            </article>
        </a>
        <a class="section" :href="this.$config.pages.about">
            <article>
                <div>
                    <span>关于</span>
                </div>
                <div class="right">
                    <a href="javascript:;" class="icon"></a>
                </div>
            </article>
        </a>
        <a class="section" :href="this.$config.pages.agreement">
            <article>
                <div>
                    <span>隐私协议</span>
                </div>
                <div class="right">
                    <a href="javascript:;" class="icon"></a>
                </div>
            </article>
        </a>
        <a class="section" href="javascript:;">
            <article class="no-border">
                <div>
                    去评分
                </div>
                <div class="right">
                    <i class="icon"></i>
                </div>
            </article>
        </a>
        <div class="gap"></div>
        <a class="section" href="javascript:;" @click="getPop(1)" v-if="member_info">
            <article class="no-border">
                <div>
                    退出登录
                </div>
            </article>
        </a>

        <ui-popup :status="popup.status" @close="popupClose">
            <div class="popup-common exit-pop">
                <div class="exit-content">
                    <p> {{ popInfo.title }} </p>
                    <span> {{ popInfo.content }} </span>
                </div>
                <div class="footer">
                    <a href="javascript:;" @click="popupClose">取消</a>
                    <a href="javascript:;" @click="confirm">确定</a>
                </div>
            </div>
        </ui-popup>

        <ui-popup :status="modelPopup.status" @close="modelPopupClose">
            <div class="popup-common model-popup">
                <p class="title">请切换阅读模式</p>
                <div class="model-box">
                    <div class="model-item" v-for="item in modelPopup.models" :class="{ active : item.active }" @click="selectModel(item)">
                        <p>{{ item.title }}</p>
                        <span>{{ item.content }}</span>
                        <i></i>
                    </div>
                </div>
                <a href="javascript:;" class="close-btn" @click="modelPopupClose"></a>
            </div>
        </ui-popup>


    </div>
</template>

<script>
import popup from "../components/popup.vue";
import scrollFixed from "../components/scrollFixed.vue";
import pageBar from "../components/pagebar.vue";

export default {
    name: "set",
    components: {
        [popup.name]: popup,
        [scrollFixed.name]: scrollFixed,
        [pageBar.name]: pageBar
    },
    data() {
        return {
            popType: '',

            popInfo: {
                title: "",
                content: ""
            },

            member_info: "",

            popup: {
                status: false
            },

            modelPopup: {
                status: false,
                currentModule: '',
                models: [
                    {
                        id: 0,
                        title: '经典模式',
                        content: '显示频道下所有国家的新闻',
                        active: false,
                    },
                    {
                        id: 1,
                        title: '喜好模式',
                        content: '根据所添加的国家，显示部分国家的新闻',
                        active: false,
                    }
                ]
            }

        };
    },
    mounted() {
        try{
            let member_info = JSON.parse(localStorage.getItem('member_info'));
            if(toString.call(member_info) === '[object Object]'){
                this.member_info = member_info;
            }
        }catch(e){
            
        }
    },

    created () {
        this.initPage();
    },

    methods: {
        initPage () {
            let read_mode = localStorage.getItem('read_mode') ? localStorage.getItem('read_mode') : '';
            if (!read_mode) {
                return false;
            }
            let list = this.modelPopup.models;
            list.forEach(item => {
                item.id == read_mode ? item.active = true : '';
            });
            let currentModule = localStorage.getItem('currentModule') ? localStorage.getItem('currentModule') : '';
            this.modelPopup.currentModule = currentModule;
        },

        getPop (type) {
            this.popType = type;
            if (type === 1) {
                this.popInfo.title = "退出登录";
                this.popInfo.content = "确认要退出登录吗？";
            } else if (type === 2) {
                this.popInfo.title = "清理缓存";
                this.popInfo.content = "确认要清理缓存吗？";
            }
            this.popup.status = true;
        },

        confirm () {
            if (this.popType === 1) {
                this.$http.get('?ct=member&ac=logout').then( res => {
                    let data = res.data;
                    if (data.code ===0 || data.code === 4001) {
                        localStorage.removeItem('token');
                        localStorage.removeItem('member_info');
                        this.popup.status = false;
                        window.location.href= 'login.html';
                    } else {
                        this.$toast(data.msg);
                    }
                });

            } else if (this.popType === 2) {
                let white_list = ['userid','token','member_info'];
                this.popup.status = false;
                Object.keys(localStorage).forEach(key=>{
                    if(white_list.indexOf(key) == -1){
                        localStorage.removeItem(key);
                    }
                });
            }

        },

        popupClose () {
            this.popup.status = false;
        },

        modelPopupClose () {
            this.modelPopup.status = false;
        },

        selectModel (item) {
            localStorage.setItem('read_mode', item.id);
            localStorage.setItem('currentModule', item.title);
            this.modelPopup.currentModule = item.title;
            let list = this.modelPopup.models;
            for (let i=0; i<list.length; i++) {
                list[i].active = item.id == list[i].id ? true : false;
            }
            this.modelPopupClose();
        }
    }
};
</script>

<style lang="less">
.set-page {
    display: flex;
    flex-direction: column;
    background-color: #fff;

    .header-middle {
        font-size: 36px;
        color: #333;
    }

    .gap {
        height: 20px;
        background-color: #f6f6f6;
    }

    .section {
        padding-left: 30px;
        article {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 40px 0;
            border-bottom: 1px solid #eee;
            div:first-child {
                color: #282828;
                font-size: 34px;
            }
            .right {
                margin-right: 30px;
                span {
                    font-size: 28px;
                    color: #919191;
                }
                .icon {
                    display: inline-block;
                    margin-left: 15px;
                    width: 9px;
                    height: 15px;
                    background-image: url("../assets/icon-item-link.png");
                    background-size: 100% 100%;
                }
            }
            span {
                color: #282828;
            }
        }
    }

    .no-border {
        border-bottom: 0;
    }

    .popup-common {
        position: absolute;
        left: 11%;
        background: #fff;
        z-index: 999;
        border-radius: 10px;
    }

    .exit-pop {
        top: 35%;
        width: 600px;
        height: 330px;
        .exit-content {
            margin-top: 40px;
            text-align: center;
            p {
                margin-bottom: 35px;
                font-size: 36px;
                font-weight: 500;
                color: #282828;
            }
            span {
                font-size: 32px;
                color: #666;
            }
        }
        .footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            a {
                display: inline-block;
                width: 50%;
                padding: 20px 0;
                text-align: center;
                font-size: 36px;
                border-top: 1px solid #e2e2e2;
                &:first-child {
                    color: #666;
                    border-right: 1px solid #e2e2e2;
                }
                &:last-child {
                    color: #e64a19;
                }
            }
        }
    }

    .model-popup {
        top: 29%;
        width: 600px;
        height: 380px;
        padding: 40px;
        .title {
            font-size: 36px;
            color: #282828;
            text-align: center;
        }
        .model-box {
            margin-top: 70px;
        }
        .model-item {
            position: relative;
            p {
                margin-bottom: 20px;
                font-size: 32px;
                color: #666;
            }
            span {
                font-size: 24px;
                color: #999;
            }
            i {
                position: absolute;
                top: 30%;
                right: 0;
                width: 26px;
                height: 19px;
                background-image: url("../assets/tousu_list_selected.png");
                background-size: 100% 100%;
                display: none;
            }
            &:first-child {
                margin-bottom: 60px;
            }
        }

        .model-item.active {
            p {
                color: #e64a19
            }
            i {
                display: inline-block;
            }
        }

        .close-btn {
            position: relative;
            bottom: -0.8rem;
            left: 45%;
            display: inline-block;
            width: 60px;
            height: 60px;
            background-image: url("../assets/icon-home_close.png");
            background-size: 100% 100%;
        }

    }
}
</style>


